<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-select v-model="examineStatusOption" clearable placeholder="审核状态" style="margin:0 20px;">
          <el-option
            v-for="item in examineStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search" style="margin-left:20px">检索</el-button>
      </el-col>

    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="手机"
        width="180">
        <template slot-scope="scope">
          <div>{{scope.row.user_info.phone}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="投标时间"
        width="180">
      </el-table-column>
      <!--<el-table-column
        prop="business_situation"
        label="业务情况"
        width="180">
      </el-table-column>
      <el-table-column
        label="成功案例/相关资质"
        width="200">
        <template  slot-scope="scope" >
          <el-button type="primary" size="mini" @click="showCase(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="对接状态"
        width="180">
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status==0">筛选中</el-tag>
            <el-tag type="success" v-show="scope.row.status==1">对接成功</el-tag>
            <el-tag type="info" v-show="scope.row.status==2">已淘汰</el-tag>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column
        prop="success_time"
        label="审核时间"
        width="180">
      </el-table-column>
      <!--<el-table-column label="审核" width='150'>
        <template slot-scope="scope">
          <div v-show="scope.row.status==0">
            <el-button type='primary' size="mini" @click="passDemandApplication(scope.row.user_id)">通过</el-button>
            <el-button type='danger' size="mini" @click="denyDemandApplication(scope.row.user_id)">拒绝</el-button>
          </div>
        </template>
      </el-table-column>-->
    </el-table>

    <!-- 成功案例/相关资质 -->
    <el-dialog title="成功案例/相关资质" :visible.sync="caseVisible" @close="initData">
      <div align="center" v-for="item in caseList" :key="item.id">
        <img :src="item.img_url" alt="" style="width: 80%" />
      </div>
    </el-dialog>
    <!-- 成功案例/相关资质end -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        caseVisible: false,
        demandDetailVisible: false,//需求弹窗状态
        userAuthId: '',//选中的用户id

        examineStatusOption: '',//审核状态
        examineStatusOptions: [
          {label: '全部', value: -1},
          {label: '待处理', value: 3},
          {label: '成功', value: 1},
          {label: '拒绝', value: 2},
        ],

        caseList: [],
        id: '',
        tableData: [{user_info: {}}],
        page: 1,
        totalPage: 0
      }
    },
    methods: {
      showCase(item){
        this.caseVisible = true;
        this.caseList = item.case_img_list
      },
      search() {
        this.page = 1;
        this.getDemandButtList()
      },
      async getDemandButtList() {
        //获取列表
        let params = {
          page: this.page,
          limit: 16,
          demand_id: this.id,
          status: this.examineStatusOption
        }
        let res = await this.$api.getDemandButtList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getDemandButtList();
      },
      async passDemandApplication(id) {
        //通过审核
        let judge = null;
        let tit = '通过该对接方?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.applicationHandle(1, id)
        }
        console.log(judge)
      },
      async applicationHandle(type, id) {
        let params = {
          demand_id: this.id,
          user_id: id,
          type: type
        }
        let res = await this.$api.operateDemandButt(params)
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getDemandButtList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      async denyDemandApplication(id) {
        //拒绝审核
        let judge = null;
        let tit = '拒绝该对接方?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.applicationHandle(2, id)
        }
        console.log(judge)
      },
      initData(){

      }
    },
    mounted() {
      this.id = this.$route.query.id
      this.getDemandButtList()
    },
  }
</script>
